<script setup lang="ts">
defineProps<{
  date:Date,
  startAddr:string,
  endAddr:string,
  fee:number,
  status:number,
  who:string,
  name:string,
}>()
</script>

<template>
  <van-cell-group inset width="100%" class="item">
    <van-cell :title="who">
      <template #value>
        <span class="value-color">{{name}}</span>
      </template>
    </van-cell>
    <van-cell title="出行时间">
      <template #value>
        <span class="value-color" style="font-weight: bold;color: RGB(184,134,11)">{{date.getFullYear()}}年{{date.getMonth()+1}}月{{date.getDate()}}日 {{date.getHours().toString().padStart(2,'0')}}:{{date.getMinutes().toString().padStart(2,'0')}}</span>
      </template>
    </van-cell>
    <van-cell title="出发地" >
      <template #value>
        <span class="value-color">{{startAddr}}</span>
      </template>
    </van-cell>
    <van-cell title="目的地">
      <template #value>
        <span class="value-color">{{endAddr}}</span>
      </template>
    </van-cell>
    <van-cell >
      <template #title>
        <span class="custom-title" >订单金额</span>
        <van-tag v-if="status===1" type="warning" style="margin-left: 10px">未支付</van-tag>
        <van-tag v-else-if="status===2" type="success" style="margin-left: 10px">已支付</van-tag>
      </template>
      <template #value>
        <span style="color:red;font-weight: bold">
          ￥{{fee}}
        </span>
      </template>
    </van-cell>
    <van-cell>
      <template #value>
        <slot name="bottom"></slot>
      </template>
    </van-cell>
  </van-cell-group>
</template>

<style scoped>
.item{
  margin-bottom: 16px;
}
.value-color{
  color: #333333;
}
</style>